<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/5/21
  Time: 9:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/x-icon" href="#"/>
    <link type="text/css" rel="styleSheet" href="${pageContext.request.contextPath}/css/main.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layuiFront/css/layui.css" media="all">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账号注册</title>


</head>


<body>
<div id="bg">

    <div id="login_wrap">
        <div id="login"><!-- 登录注册切换动画 -->
            <div id="status">
                <i style="top: 0">注册</i>
            </div>
            <span>
                    <form action="#" id="registerform">
                        <p class="form"><input type="text" id="username" name="username" placeholder="用户名（3-16位数字、字母）"></p>
                        <p class="form"><input type="text" id="usertel" name="usertel" placeholder="手机号"></p>
                        <p class="form"><input type="text" id="code" placeholder="请输入验证码" style="width: 180px">
                            <input type="button" id="cbutton" class="btn" value="获取验证码"
                                   style="width: 120px;height: 30px;margin: 0px">
                        </p>
                         <p class="form"><input type="password" id="userpassword" name="userpassword" placeholder="密码"></p>
                        <p class="form"><input type="password" id="quserpassword" placeholder="确认密码"></p>
                        <input type="button" value="注册" class="btn" id="registerbtn" style="margin-right: 20px;">
                    </form>

                </span>
        </div>


        <div id="login_img"><!-- 图片绘制框 -->
            <span class="circle">
                    <span></span>
                    <span></span>
                </span>
            <span class="star">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </span>
            <span class="fly_star">
                    <span></span>
                    <span></span>
                </span>
            <p id="title">PIGEYE</p>
        </div>
    </div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/layuiFront/layui.js" charset="utf-8"></script>
<script>
    layui.use('table', function () {
        var table = layui.table;
        var yzm = null;
        $("#cbutton").click(function () {
                var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
                var usertel = $("#usertel").val()
                if (usertel === "") {
                    layer.tips('手机号码不能为空', '#usertel');
                } else if (!myreg.test(usertel)) {
                    layer.tips('请输入正确的手机号码', '#usertel');
                } else {
                    $.ajax({
                        type: "post",
                        data: {"usertel": usertel},
                        url: "code",
                        success: function (message) {
                            /*if (message.msg === "ok") {
                                var news = "验证码已发送"
                            }*/
                            if (message.msg == "该手机已经注册过了，请直接登录") {
                                layer.open({
                                    title: 'PE影城提示',
                                    content: message.msg,
                                    btn: ['确定'],
                                    yes: function (index, layero) {
                                        window.location.href = "tellogin.jsp";
                                    },
                                    cancel: function () {
                                        //右上角关闭回调
                                        window.location.href = "tellogin.jsp";
                                        //return false 开启该代码可禁止点击该按钮关闭
                                    }
                                });
                            } else {
                                layer.tips(message.msg, '#cbutton');
                                yzm = message.code;
                            }
                        }
                    });
                }
            }
        );
        $("#username").blur(function () {
            var username = $("#username").val()
            var usernamereg = /^[a-zA-Z0-9]{3,16}$/;
            if (username == "") {
                layer.tips('用户名不能为空', '#username');

            } else if (!usernamereg.test(username)) {
                layer.tips('用户名格式不正确', '#username');
                $("#username").val("");
            } else {
                $.ajax({
                    type: "post",
                    data: {"username": username},
                    url: "verify",
                    success: function (message) {

                        if (message.msg == "用户名已存在") {
                            layer.open({
                                title: 'PE影城提示',
                                content: message.msg,
                                btn: ['确定'],
                                yes: function (index, layero) {
                                    layer.close(index)
                                    $("#username").val("")
                                },
                            });
                        }
                    }
                })
            }
        })

        $("#registerbtn").click(function () {
            var usertel = $("#usertel").val()
            var code = $("#code").val()
            var userpassword = $("#userpassword").val()
            var quserpassword = $("#quserpassword").val()
            var passreg = /^[a-zA-Z\d]{6,16}$/;
            if (!(yzm == code)) {
                layer.tips('验证码不正确，请重新输入', '#code');
            }else if (!passreg.test(userpassword)){
                layer.tips('密码不规范，请重新输入', '#userpassword');
            }else if(usertel==""){
                layer.tips('手机号不能为空，请重新输入', '#usertel');
            }
            else if (userpassword != quserpassword) {
                layer.tips('密码不一致，请重新输入', '#quserpassword');
            } else {
                $.ajax({
                    type: "post",
                    data: $("#registerform").serialize(),
                    async: false,
                    url: "register",
                    success: function (message) {
                        /*layer.tips(message.msg, '#cbutton');*/
                        //console.log(message.msg);
                        if (message.msg == "注册成功") {
                            layer.open({
                                title: 'PE影城提示',
                                content: message.msg + ',请登录',
                                btn: ['确定'],
                                yes: function (index, layero) {
                                    window.location.href = "tellogin";
                                },
                                cancel: function () {
                                    //右上角关闭回调
                                    window.location.href = "tellogin";
                                    //return false 开启该代码可禁止点击该按钮关闭
                                }
                            });

                        } else if (message.msg == "手机号已注册，请登录") {

                            layer.open({
                                title: 'PE影城提示',
                                content: message.msg,
                                btn: ['确定'],
                                yes: function (index, layero) {
                                    window.location.href = "tellogin";
                                },
                                cancel: function () {
                                    //右上角关闭回调
                                    window.location.href = "tellogin";
                                    //return false 开启该代码可禁止点击该按钮关闭
                                }
                            });
                        } else {
                            //发生不可知异常  弹窗提醒用户注册失败  请重新注册
                            layer.open({
                                title: 'PE影城提示',
                                content: "注册失败",
                                btn: ['确定'],
                                yes: function (index, layero) {
                                    layer.close(index)
                                    $("registerform").val("")
                                    // $("#code").val("")
                                },
                            });
                        }

                    }
                });
            }
        });

    });

</script>

</html>
